<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@page import="net.sf.json.JSONArray" %>
    <%@page import="java.util.*" %>
    <%@page import="ack.Util.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://echarts.baidu.com/dist/echarts.common.min.js"></script>
<title>Echart Util Demo</title>

</head>
<body>
<center>
<h1>this is demo</h1>
<h2>这是echart数据组装工具的最简单示例,演示如何快速构建echart所需数据</h2>
</center>
<div id="main" style="height: 400px"></div>
	
	<%
	
	List<LinkedHashMap<String, Object>>	varListecharts =new ArrayList<LinkedHashMap<String,Object>>();
	//varListecharts = operatorerrorcodeavgsignalService.listGraph(pd);	//列出ErrorCountByOperator列表
	//一般通过service获得结果集（源于库表数据集），便于演示，下面简单模拟库表中的数据集记录
	LinkedHashMap<String, Object>map1=new LinkedHashMap<String, Object>();
	LinkedHashMap<String, Object>map2=new LinkedHashMap<String, Object>();
	LinkedHashMap<String, Object>map3=new LinkedHashMap<String, Object>();
	LinkedHashMap<String, Object>map4=new LinkedHashMap<String, Object>();
	LinkedHashMap<String, Object>map5=new LinkedHashMap<String, Object>();
	map1.put("name", "邮件营销");	map1.put("周一", 120);	map1.put("周二", 132);	map1.put("周三", 101);	
	map1.put("周四", 134);map1.put("周五", 90);	map1.put("周六", 230);	map1.put("周日", 210);
	map2.put("name", "联盟广告");	map2.put("周一", 220);	map2.put("周二", 182);	map2.put("周三", 191);
	map2.put("周四", 234);	map2.put("周五", 290);	map2.put("周六", 330);	map2.put("周日", 310);
	map3.put("name", "视频广告");	map3.put("周一", 150);	map3.put("周二", 232);	map3.put("周三", 201);
	map3.put("周四", 154);	map3.put("周五", 190);	map3.put("周六", 330);	map3.put("周日", 410);
	map4.put("name", "直接访问");	map4.put("周一", 320);	map4.put("周二", 332);	map4.put("周三", 301);
	map4.put("周四", 334);	map4.put("周五", 390);	map4.put("周六", 330);	map4.put("周日", 320);
	map5.put("name", "搜索引擎");	map5.put("周一", 320);	map5.put("周二", 332);	map5.put("周三", 301);
	map5.put("周四", 334);	map5.put("周五", 390);	map5.put("周六", 330);	map5.put("周日", 320);
	varListecharts.add(0, map1);varListecharts.add(0, map2);varListecharts.add(0, map3);
	varListecharts.add(0, map4);	varListecharts.add(0, map5);
	
	//通过上面，模拟好待组装的数据后，使用Echart组装数据，
	Echart e=new Echart();
	StringBuffer seriesStr = Echart.getLineSeriesStr(varListecharts);//得到series部分json字符串
	LinkedHashMap<String, Object>replacement=new LinkedHashMap<String, Object>();
	replacement.put("#title#", "堆叠区域图");
	replacement.put("#stack#", new String[]{"邮件营销","联盟广告","视频广告","直接访问","搜索引擎"});//此处为ArrayList等集合类也行
	replacement.put("#xAxis#", new String[]{"周一","周二","周三","周四","周五","周六","周日"} );//此处为ArrayList等集合类也行
	replacement.put("#stackData#", seriesStr+"");
	String optionStr=e.getOption(replacement);
	
	%>
	<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
//显示标题，图例和空的坐标轴
myChart.setOption({
    title: {
        text: '加载中。。。'
    },
    tooltip: {},
    legend: {
        data:[]
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '',
        type: 'bar',
        data: []
    }]
});

data2=<%=optionStr%>;//此处eval将jsonString转为正式Json对象时，要包裹括号，巨坑吖
console.info("#option:"+data2);
myChart.setOption(data2);
//异步加载数据
	/* $.get("errorcountbycountry/listGraph",function(data,status){
	    //alert("Data: " + data + "\nStatus: " + status);
	    data2=eval("("+data+")");//此处eval将jsonString转为正式Json对象时，要包裹括号，巨坑吖
	    myChart.setOption(data2);
	  }); */
	
</script>
</body>
</html>